<template>
	<div class="advan">
	   <swiper :options="swiperOption" class="swiper-wrapper">
      <swiper-slide v-for="item in swiperList" :key="item.id">
      	<div class="sw-title">
      		<img src="../assets/img/h3_bj.jpg" >
      		<h3>{{item.nameCn}}</h3>
      		<img src="../assets/img/h3_bj.jpg" >
      	</div>
      	<div class="name-en">
      		<h3>{{item.nameEn}}</h3>
      	</div>
      	<p class="zs_desc_top">{{item.zs_desc_top}}</p>
      	<div class="content">
      		<img src="../assets/img/zs.jpg">
      		<h5>{{item.zsName}}</h5>
      		<p>{{item.zs_desc_bom}}</p>
      	</div>
      </swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <div class="swiper-pagination"></div>
	</div>
</template>

<script>
export default {
  name: "HomeAdvantage",
  data() {
    return {
      swiperOption: {
        //swiper3,
        autoplay: 3000,
        speed: 1000,
        pagination: ".swiper-pagination"
      },
      swiperList: [
        {
          id: "1",
          nameCn: "优势业务",
          nameEn: "ADVANTAGE",
          zsName: "建筑工程施工总承包资质",
          zs_desc_top:
            "申报时间短，通过率高，专业建筑资质代办，行业公司值得信赖",
          zs_desc_bom:
            "建筑工程施工总承包资质建筑工程施工总承包资质建筑工程施总承包资质建筑工程施工总承包资质建筑工程施······"
        },
        {
          id: "2",
          nameCn: "优势业务2",
          nameEn: "ADVANTAGE",
          zsName: "建筑工程施工总承包资质2",
          zs_desc_top:
            "申报时间短，通过率高，专业建筑资质代办，行业公司值得信赖",
          zs_desc_bom:
            "建筑工程施工总承包资质建筑工程施工总承包资质建筑工程施总承包资质建筑工程施工总承包资质建筑工程施······"
        },
        {
          id: "3",
          nameCn: "优势业务3",
          nameEn: "ADVANTAGE",
          zsName: "建筑工程施工总承包资质3",
          zs_desc_top:
            "申报时间短，通过率高，专业建筑资质代办，行业公司值得信赖",
          zs_desc_bom:
            "建筑工程施工总承包资质建筑工程施工总承包资质建筑工程施总承包资质建筑工程施工总承包资质建筑工程施······"
        },
        {
          id: "4",
          nameCn: "优势业务4",
          nameEn: "ADVANTAGE",
          zsName: "建筑工程施工总承包资质4",
          zs_desc_top:
            "申报时间短，通过率高，专业建筑资质代办，行业公司值得信赖",
          zs_desc_bom:
            "建筑工程施工总承包资质建筑工程施工总承包资质建筑工程施总承包资质建筑工程施工总承包资质建筑工程施······"
        }
      ]
    };
  },
  mounted() {}
};
</script>

<style lang="stylus" scoped>

.swiper-pagination
	bottom 0.3rem
	left 40%

.swiper-pagination >>> .swiper-pagination-bullet
	margin-right .2rem
	width .15rem
	height .15rem
.swiper-pagination >>> .swiper-pagination-bullet-active
	background #ffc507
.advan
	background-color #f5f5f5
	padding .52rem .63rem
	padding-bottom 1rem
	position relative
	.swiper-wrapper
		padding-bottom 1.5rem
		.sw-title
			margin 0 auto
			display flex
			justify-content center
			img
				width .48rem
				height .27rem
			h3
				font-size .3rem
				padding 0 .12rem
				color #303030
		.name-en
			width 100%
			text-align center
			margin-top .13rem
			h3
				color #b6b6b6
				font-size .3rem
		.zs_desc_top
			font-size .14rem
			color #494949
			margin-top .2rem
			line-height .32rem
		.content
			width 4.41rem
			height 2.96rem
			margin .26rem auto
			img
				width: 100%
				display block
			h5
				color #3b3b3b
				font-size .18rem
				margin-top .26rem
			p
				font-size .16rem
				color #646464
				margin-top .2rem
				line-height .36rem
</style>
